<template>

  <div>
    <Card>
      <Row class="operation">
        <Button type="primary" size="large" icon="md-add" @click="openModel('2')">添加子节点</Button>
        <Button size="large" icon="md-add" @click="openModel('1')"> 添加顶级菜单</Button>
        <Button size="large" icon="ios-trash" @click="removeMenu">批量删除</Button>
        <Dropdown @click="getPerTree">
          <Button size="large">
            更多操作
            <Icon type="ios-arrow-down"></Icon>
          </Button>
          <DropdownMenu slot="list">
            <span @click="getPerTree"><DropdownItem>刷新</DropdownItem></span>
            <DropdownItem>收合所有</DropdownItem>
            <DropdownItem>仅展开一级</DropdownItem>
            <DropdownItem>仅展开二级</DropdownItem>
            <DropdownItem>展开所有</DropdownItem>
          </DropdownMenu>
        </Dropdown>
        <i-switch size="large">
          <span slot="open">级联</span>
          <span slot="close">单选</span>
        </i-switch>
      </Row>
      <Row>
        <Col span="6">
          <Alert show-icon>当前编辑选择: <a>{{this.selectMenu.title}}</a></Alert>
          <Input suffix="ios-search" placeholder="输入菜单名搜索"/>
          <Tree :data="menuTree" show-checkbox ref="menuTree" @on-select-change="treeChange()"></Tree>
        </Col>
        <Col span="9">
          <Form :label-width="100" :rules="ruleValidate" :model="selectMenu">
            <FormItem label="类型">
              <div v-for="item in menuType" :label="item.value">
                <span v-if="selectMenu.type === item.value"><icon :type="item.icon"/>{{item.label}}</span>
              </div>
            </FormItem>
            <FormItem label="名称">
              <Input size="large" v-model="selectMenu.title" clearable></Input>
            </FormItem>
            <FormItem label="路径">
              <Input size="large" v-model="selectMenu.path" clearable></Input>
            </FormItem>
            <FormItem label="路由英文名">
              <Input size="large" v-model="selectMenu.name" clearable></Input>
            </FormItem>
            <FormItem label="图标" v-if="selectMenu.type !== '5'">
              <IconChoose v-model="selectMenu.icon" i_disabled></IconChoose>
            </FormItem>
            <FormItem label="前段组件" v-if="selectMenu.type === '4'">
              <Input size="large" v-model="selectMenu.component" clearable></Input>
            </FormItem>
            <FormItem label="第三方链接" v-if="selectMenu.type === '3'">
              <Input size="large" v-model="selectMenu.url" clearable></Input>
            </FormItem>
            <FormItem label="请求权限类型" prop="name" v-if="selectMenu.type === '5'">
              <Select v-model="selectMenu.buttonType">
                <Option v-for="item in cityList" :value="item.value" :key="item.value">{{item.label}}</Option>
              </Select>
            </FormItem>
            <FormItem label="排序值" v-if="model.type !== '5'">
              <Row>
                <Col span="4">
                  <InputNumber size="large" :max="100" :min="1" v-model="selectMenu.sortOrder" clearable></InputNumber>
                </Col>
              </Row>
            </FormItem>
            <FormItem label="是否启用">
              <i-switch size="large" v-model="selectMenu.status" :true-value="0" :false-value="-1">
                <span slot="open">启用</span>
                <span slot="close">禁用</span>
              </i-switch>
            </FormItem>
            <FormItem>
              <Button type="primary" size="large" icon="ios-brush-outline" @click="editMenu">修改并保存</Button>
              <Button size="large" @click="selectMenu=JSON.parse(JSON.stringify($refs.menuTree.getSelectedNodes()[0]))"
                      style="margin-left: 8px">重置
              </Button>
            </FormItem>
          </Form>
        </Col>
      </Row>
    </Card>
    <Modal v-model="model.addModel" :title="model.addModelTitle" draggable>
      <Form :label-width="100" :model="menu" ref="menu">
        <FormItem label="上级节点:" v-if="selectMenu!=null && selectMenu.selected===true && model.type !== '1'">
          {{selectMenu.title}}
        </FormItem>
        <FormItem label="类型:" prop="name">
          <span v-if="model.type === '1' "><icon type="ios-navigate"/>顶级菜单</span>
          <RadioGroup v-model="model.type" vertical v-if="model.type !== '1'" size="large">
            <div v-for="item in menuType" :label="item.value">
              <Radio :label="item.value" v-if="item.value!=='1'">
                <icon :type="item.icon"/>
                {{item.label}}
              </Radio>
            </div>
          </RadioGroup>
        </FormItem>
        <FormItem label="名称:" prop="title">
          <Input placeholder="" v-model="menu.title"></Input>
        </FormItem>
        <FormItem label="英文名:" prop="name">
          <Input placeholder="" v-model="menu.name"></Input>
        </FormItem>
        <FormItem label="图标" prop="icon" v-if="model.type !== '5'">
          <IconChoose i_disabled placeholder="输入图标名或者选择图标" v-model="menu.icon"></IconChoose>
        </FormItem>
        <FormItem label="路径:" prop="path">
          <Input placeholder="" v-model="menu.path"></Input>
        </FormItem>
        <FormItem label="第三方链接" prop="url" v-if="model.type === '3'">
          <Input placeholder="" v-model="menu.url"></Input>
        </FormItem>
        <FormItem label="前段组件" prop="component" v-if="model.type === '4'">
          <Input placeholder="" v-model="menu.component"></Input>
        </FormItem>
        <FormItem label="请求权限类型" prop="path" v-if="model.type === '5'">
          <Select v-model="menu.buttonType">
            <Option v-for="item in cityList" :value="item.value" :key="item.value">{{item.label}}</Option>
          </Select>
          <!--          <Input placeholder="" v-model="menu.path"></Input>-->
        </FormItem>
        <FormItem label="排序值:" prop="sortOrder" v-if="model.type !== '5'">
          <Row>
            <Col sapn="3">
              <InputNumber :max="100" :min="1" v-model="menu.sortOrder"></InputNumber>
            </Col>
          </Row>
        </FormItem>
        <FormItem label="是否启用:" prop="status">
          <i-switch size="large" v-model="menu.status" :true-value="0" :false-value="-1">
            <span slot="open">启用</span>
            <span slot="close">禁用</span>
          </i-switch>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="text" @click="addCancel">取消</Button>
        <Button type="primary" @click="addMenu">提交</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
import IconChoose from '@/view/my-components/icon-choose'
import {
  addPermission,
  getPerTree,
  removePermission,
  editPermission,
  selectUserPermissionTree
} from '../../api/user-api'
import lib from '@/libs'

export default {
  name: 'menu-list',
  components: {
    IconChoose
  },
  data () {
    return {
      menuType: [
        {
          label: '顶级菜单',
          value: '1',
          icon: 'ios-navigate'
        },
        {
          label: '导航菜单',
          value: '2',
          icon: 'md-git-pull-request'
        },
        {
          label: '链接菜单',
          value: '3',
          icon: 'md-attach'
        },
        {
          label: '页面菜单',
          value: '4',
          icon: 'md-list-box'
        },
        {
          label: '操作按钮',
          value: '5',
          icon: 'md-radio-button-on'
        }
      ],
      model: {
        addModel: false,
        /**
           *   <Radio label="2">导航菜单</Radio>
           *<Radio label="3">链接菜单</Radio>
           *<Radio label="4">页面菜单</Radio>
           *<Radio label="5">操作按钮</Radio>
           */
        type: '2',
        addModelTitle: '添加菜单'
      },
      menuTree: [],
      ruleValidate: {
        name: [
          { required: true, message: 'The name cannot be empty', trigger: 'blur' }
        ]
      },
      iconModalVisible: false,
      menu: {
        name: '',
        sortOrder: 0,
        status: 0,
        level: 0,
        type: 0,
        title: '',
        component: '',
        buttonType: '',
        parentId: '0',
        url: '',
        icon: '',
        path: ''
      },
      selectMenu: {},
      cityList: [
        {
          value: 'view',
          label: '查看操作(view)'
        },
        {
          value: 'add',
          label: '添加操作(add)'
        },
        {
          value: 'edit',
          label: '修改操作(edit)'
        },
        {
          value: 'delete',
          label: '删除操作(delete)'
        },
        {
          value: 'clear',
          label: '清空操作(clear)'
        },
        {
          value: 'restart',
          label: '重置操作(restart)'
        }
      ]

    }
  },
  created () {
    this.getPerTree()
  },
  methods: {
    /**
       *修改菜单
       */
    editMenu () {
      editPermission(this.selectMenu).then(res => {
        this.$Message.success(res.msg)
        if (res.code === 200) {
          this.$refs.menu.resetFields()
          this.model.addModel = false
          this.getPerTree()
        }
      }).catch(err => {
        this.$Message.error('请求失败')
      })
    },
    /**
       *删除菜单
       */
    removeMenu () {
      let data = []
      this.$refs.menuTree.getCheckedNodes().forEach(v => {
        data.push(v.id)
      })
      if (data.length <= 0) {
        this.$Message.warning('请选择菜单')
        return
      }
      removePermission(data).then(res => {
        if (res.code === 200) {
          this.$Message.warning(res.msg)
          this.getPerTree()
        } else {
          this.$Message.warning(res.msg)
        }
      }).catch((err) => {
        this.$Message.error('请求失败')
      })
    },
    /**
       *
       *添加菜单
       */
    addMenu () {
      switch (this.model.type) {
        case '2':
          this.menu.component = 'Main'
          break
        case '3':
          this.menu.component = '/sys/monitor/monitor'
          break
        default:
          break
      }
      this.menu.type = this.model.type
      addPermission(this.menu).then(res => {
        this.$Message.success(res.msg)
        if (res.code === 200) {
          this.$refs.menu.resetFields()
          this.model.addModel = false
          this.getPerTree()
        }
      }).catch(err => {
        this.$Message.error('请求失败')
      })
    },

    /**
       * 取消添加
       */
    addCancel () {
      this.$refs.menu.resetFields()
    },
    /**
       * 打开添加窗口
       * */
    openModel (type) {
      this.$refs.menu.resetFields()
      this.model.type = type
      if (type === '1') {
        this.menu.parentId = '0'
        this.menu.type = '1'
        this.model.addModel = true
        return
      }
      if (this.selectMenu != null && this.selectMenu.selected === true) {
        this.menu.parentId = this.selectMenu.id
        this.menu.level = this.selectMenu.level + 1
        this.menu.type = type
        this.model.addModel = true
        return
      }
      this.$Message.warning('请选择菜单')
    },
    /**
       * 选择节点事件
       */
    treeChange () {
      let select = this.$refs.menuTree.getSelectedNodes()[0]
      if (select === undefined) {
        this.editFrom = {}
        return
      }
      this.selectMenu = JSON.parse(JSON.stringify(select))
    },
    /**
       * 获取菜单树
       */
    getPerTree () {
      this.menuTree = []
      selectUserPermissionTree().then(res => {
        if (res.code === 200) {
          this.menuTree = this.createTree(res.data.data)
        }
      })
    },
    /**
       * 封装部门数
       * @param list list
       */
    createTree (list) {
      if (list === undefined) {
        return []
      }
      let tree = []
      list.forEach(v => {
        tree.push({
          title: v.title,
          expand: true,
          parentTitle: v.parentTitle,
          parentId: v.parentId,
          status: v.status,
          staffs: [],
          sortOrder: v.sortOrder,
          buttonType: v.buttonType,
          name: v.name,
          url: v.url,
          path: v.path,
          type: v.type.toString(),
          level: v.level,
          icon: v.icon,
          id: v.id,
          component: v.component,
          children: this.createTree(v.children),
          render: (h, { root, node, data }) => {
            return h('span', {
              style: {
                display: 'inline-block',
                width: '100%'
              }
            }, [
              h('span', [
                h('Icon', {
                  props: {
                    type: data.icon
                  },
                  style: {
                    marginRight: '10px'
                  }
                }),
                h('span', data.title)
              ])
            ])
          }
        })
      })
      return tree
    }
  }
}
</script>
<style lang="less">
  .operation Button {
    margin: 8px;
  }
</style>
